// import React from 'react';
// //import ReactDOM from 'react-dom';
// import { connect } from 'react-redux'
// //import { Card, WingBlank, WhiteSpace, Radio, Flex, List} from "antd-mobile"
// import fns from "./../store/asyncMethods"
// import "../css/style.css"
// import OneDati from "./../component/oneDate"
// //connect是连接对象
// class TenDatiCounter extends React.Component {//要渲染的组件
// 	constructor(props) {
// 		super(props);
// 		this.state = {
// 			currentTimu: 0,
// 			timuArr: []
// 		};
		
// 	};
// 	componentWillMount() {
// 		//将要接收新的props
// 		this.props.getTimu()
// 	};
	
// 	render() {
// 		let timuArr = this.props.timuList;
// 		if (timuArr.length > 0) {
// 			return (
// 				// timuArr.map((item,index)=>{
// 				// 	return(
// 				// 		<OneDati key={index}></OneDati>
// 				// 	)
// 				// })
// 				<OneDati></OneDati>
// 			)
// 		} else {
// 			return (
// 				<div>加载中</div>
// 			)
// 		}
// 	};
// 	answerEvent(index){
// 		//在使用onClick={()=>this.handleClick()这种方法的时候，每次都是从新调用该方法，
// 		//如果想要实现自增的话，只需每次进行 +1 ，而不是++
// 		// let currentNum = this.state.currentTimu;
// 		// currentNum++
// 		// this.setState({
// 		// 	currentTimu:currentNum
// 		// });

// 		//传进去索引,与正确得答案做对比
// 		console.log(index+1)
// 		//获取得答案
// 		let currentAnswer = this.props.timuList[this.state.currentTimu].answer;
// 		console.log(currentAnswer)
// 		if( parseInt(index+1) === parseInt(currentAnswer)){
// 			console.log("true")
// 		}
// 		else{
// 			console.log("false")
// 		}
// 	}
// };

// //将要修改的数据映射到props函数
// function mapStateToProps(state) {

// 	return { ...state }
// }
// //将要修改的数据的状态，映射到要修改的props方法
// function mapDispatchToProps(dispatch) {
// 	return {
// 		onAddClick: () => {
// 			dispatch({ type: "add" })
// 		},
// 		getTimu: async () => {
// 			let list = await fns.TmList();
// 			dispatch({
// 				type: "setTimu",
// 				content: list
// 			});

// 		}
// 	}
// }

// /**
//  * 第四步，将上面的这两个方法，
//  * 将数据仓库的state和修改state的方法映射到组件上，形成新的组件
//  */
// //connect用于绑定刚才创建的映射关系
// const TenDati = connect(
// 	mapStateToProps,
// 	mapDispatchToProps
// )(TenDatiCounter)

// export default TenDati;


import React from 'react';
//import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { Card, WingBlank, WhiteSpace, Radio,  List, Button } from "antd-mobile"
import fns from "./../store/asyncMethods"
import "../css/style.css"
const RadioItem = Radio.RadioItem;
//connect是连接对象
class DatiCounter extends React.Component {//要渲染的组件
	constructor(props) {
		super(props);
		this.state = {
			currentTimu: 0,
			timuArr: [],
			value:-1,
			selectAnswer:[]
		};

	};
	componentWillMount() {
		//将要接收新的props
		this.props.getTimu()
	};

	render() {

		let timuArr = this.props.timuList;
		let currentNum = this.state.currentTimu;
		let {value} = this.state;
		if (timuArr.length > 0) {
			
			let options = JSON.parse(timuArr[currentNum].options);//解析获取答案列表
			return (
				<div>
					{/* 这是一个题 */}
					<WingBlank size="lg">
						<WhiteSpace size="lg" />
						<Card>
							<Card.Header
								title="类别：文科"
								thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
								extra={<span>语文</span>}
							/>
							<Card.Body>
								
								<List renderHeader={() => timuArr[currentNum].quiz}>
								<WhiteSpace size="lg" />
									{options.map((item,index) => (
										// 这里让checked为真就好
										<RadioItem key={index} checked={value === index} onChange={(item,e) => this.answerEvent(index,item,e)}>
											{(index+1) + " ."+item}
										</RadioItem>
									))}
								</List>
								<WhiteSpace size="lg" />
								<Button type="primary" disabled onClick={()=>this.prevQuestion()}>上一题</Button>
								<WhiteSpace size="lg" />
								<Button type="primary"  onClick={()=>this.nextQuestion()}>下一题</Button>
								<WhiteSpace size="lg" />
								<Button type="primary" onClick={()=>this.Submit()}>提交</Button>
							</Card.Body>
							<Card.Footer content={"第 " + parseInt(currentNum + 1) + " 题"} extra={<div>时间：29:30</div>} />
						</Card>
						<WhiteSpace size="lg" />
					</WingBlank>

				</div>
			)
		} else {
			return (
				<div>加载中</div>
			)
		}
	};

	answerEvent(index,item, e) {
		//在使用onClick={()=>this.handleClick()这种方法的时候，每次都是从新调用该方法，
		//如果想要实现自增的话，只需每次进行 +1 ，而不是++
		// let currentNum = this.state.currentTimu;
		// currentNum++
		// this.setState({
		// 	currentTimu:currentNum
		// });
		this.setState({
			value:index
		})
		//console.log(index + 1)
		//获取得答案
		let currentAnswer = this.props.timuList[this.state.currentTimu].answer;
		//console.log(currentAnswer)
		if (parseInt(index + 1) === parseInt(currentAnswer)) {
			// 答对进入下一题
			//let currentNum = this.state.currentTimu;
			//currentNum++	
		}
		else {
			//console.log("false")
		}
	}

	//下一题
	nextQuestion = ()=>{
		console.log("上一题的答案是" + this.state.value)
		let selectAnswer = this.state.selectAnswer;//定义的是自己选择的答案
		//下一题之前清除之前勾选的内容
		let currentNum = this.state.currentTimu;
		
		if(currentNum < this.props.timuList.length-1){
			selectAnswer.push(this.state.value+1)
			currentNum++;
			this.setState({
				value:-1,
				currentTimu:currentNum,
			});			
			console.log(this.state.selectAnswer);
		}
		else{
			return
		}
	};
	//上一题
	prevQuestion = ()=>{
		
		//存放选择的答案的数据
		//获取之前存储的答案

		let prevAnswer = this.state.selectAnswer;
		console.log(this.state.selectAnswer)
		let myValue = prevAnswer.pop()-1 || this.state.selectAnswer[0];
		//下一题之前清除之前勾选的内容
		this.setState({
			value:myValue
		})

		let currentNum = this.state.currentTimu;
		//如果回到第一题了，就不再进行操作，直接返回
		if(currentNum>0){
			currentNum--;
			this.setState({
				currentTimu:currentNum
			})
		}
		else{
			return
		}
	};
	//交卷
	Submit = ()=>{
		//获取正确的答案
		console.log(this.props.timuList)
		const allAnsList = this.props.timuList;
		//定义正确答案的数组
		let ansArr = [];
		for(let i=0; i<allAnsList.length-1; i++){
			ansArr.push(Number(allAnsList[i].answer))
		}
		console.log(ansArr)//正确答案的数组

		//获取选择的答案的数组
		//先获取最后一个选择的答案
		let myAnswer = this.state.selectAnswer;//这是自己的钱就个答案数组

		console.log(myAnswer)

		let score = 0;//分数
		for(let i=0;i<myAnswer.length;i++){
			if(myAnswer[i] === ansArr[i]){
				score = score+10;
			}	
		};

		alert("你的分数为：" + score)
	}
		
};

//将要修改的数据映射到props函数
function mapStateToProps(state) {

	return { ...state }
}
//将要修改的数据的状态，映射到要修改的props方法
function mapDispatchToProps(dispatch) {
	return {
		onAddClick: () => {
			dispatch({ type: "add" })
		},
		getTimu: async () => {
			let list = await fns.TmList();
			dispatch({
				type: "setTimu",
				content: list
			});

		}
	}
}

/**
 * 第四步，将上面的这两个方法，
 * 将数据仓库的state和修改state的方法映射到组件上，形成新的组件
 */
//connect用于绑定刚才创建的映射关系
const Dati = connect(
	mapStateToProps,
	mapDispatchToProps
)(DatiCounter)

export default Dati;